<template>
  <TableView
    ref="tableView"
    :table-attrs="{ api: fetchList, descs: ['create_time'] }"
    :tree-attrs="{
      fetchApi: regionalFetchTree,
      show: true,
      treeProps: { label: 'name' },
      lazy: false,
      'expand-first-node': true,
      customRootNode: { name: '全部', id: -1 }
    }"
    form-path="/space/fyroomregional/regionalForm/{id:-1}"
    :search-model="searchForm"
    :delete-api="batchDelete"
    :tree-listeners="{ 'node-click': onNodeClick }"
    :toolbar-attrs="{
      buttons: [
        'slot',
        { del: permissions.regional_fyroomregional_del, create: permissions.regional_fyroomregional_add }
      ]
    }">
    <template #toolbar-button>
      <ToolbarButton
        v-if="permissions.regional_fyroomregional_export"
        type="primary"
        icon="el-icon-download"
        label="导出"
        @click="exportExcel()" />
      <ToolbarButton
        v-if="permissions.regional_fyroomregional_export"
        type="primary"
        icon="el-icon-upload"
        label="导入"
        @click="$refs.excelUpload.show()" />
    </template>
    <template #columns>
      <TableColumn label="所属父区域名称" prop="parentName" width="135" />
      <TableColumn label="区域名称" clickable prop="name" width="135" />
      <TableColumn label="区域编码" clickable prop="code" width="135" />
      <TableColumn label="经度" prop="x" />
      <TableColumn label="纬度" prop="y" />
      <TableColumn label="占地面积" prop="coverArea" />
      <TableColumn label="建筑面积" prop="floorage" />
      <TableColumn label="区域地址" prop="address" />
      <TableColumn label="邮证编号" prop="postalCode" />
      <TableColumn label="门牌号" prop="houseNumber" />
      <TableColumn label="门牌号" prop="permittedUse" />
      <TableColumn label="土地名称" prop="landName" />
      <TableColumn label="单位名称" prop="mgmtUnitName" />
      <TableColumn label="备注" prop="remarks" />
    </template>
    <template #search-form>
      <FormInput v-model="searchForm.name" label="区域名称" prop="name" />
      <FormInput v-model="searchForm.address" label="区域地址" prop="address" />
    </template>
    <!--excel 模板导入 -->
    <ExcelUpload
      ref="excelUpload"
      title="区域信息导入"
      :url="`${spaceService}fyroomregional/import`"
      :temp-url="`${spaceService}fyroomregional/local/regionalTemp.xlsx`"
      temp-name="区域导入模板.xlsx"
      @refreshDataList="refreshChange" />
  </TableView>
</template>

<script>
  import { mapState } from 'vuex'
  import { services } from '@/config'
  import { fetchList, batchDelete, regionalFetchTree } from '@/api/space/fyroomregional'

  export default {
    name: 'RegionalView',

    data() {
      return {
        searchForm: {
          name: '',
          address: '',
          parentId: null
        },
        spaceService: services.spaceService
      }
    },
    computed: {
      ...mapState('user', ['permissions'])
    },
    methods: {
      batchDelete,
      regionalFetchTree,
      fetchList,
      onNodeClick(node) {
        this.searchForm.parentId = node.id === -1 ? null : node.id
        this.$refs.tableView.onSearchClick()
      },
      refreshChange(node) {
        this.$refs.tableView.onSearchClick()
      },
      //  导出excel
      exportExcel() {
        this.$downBlobFile(
          `${services.spaceService}fyroomregional/export`,
          this.searchForm,
          `区域管理${this.$dateFormat(new Date())}.xlsx`
        )
      }
    }
  }
</script>
